@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

body,html{font-size:16px; font-family: 'Montserrat', sans-serif; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    overflow: hidden;
}
*,*:before,*:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,p,ol,ul {margin: 0;padding: 0}
ol,ul{list-style-type: none}
img{height: auto}

p{color: #000000}

button{background: none;}
*{outline: none} 
*:active{outline: none }
*:focus{outline: 0.4vmin solid #007EA8 } 

.container {
    /* border:1px solid red; */
    margin: 0 auto;
    height: 100vh;
    position: relative;
    width: fit-content;
    
}



/* griglia */

.grid {
    /* border: 1px solid red; */
    width: 100%;
    height: 100vh;
    /* height: calc(var(--vh, 1vh) * 100); */
    display: grid;
    grid-template-columns: 51.5vmin 51.5vmin;
    grid-template-rows: 38vmin 38vmin;
    column-gap: 9.5vmin;
    row-gap: 15vmin;
    padding: 4vmin;
    /* grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: 8%;
    row-gap: 15%; */
    padding: 4vmin;
}

.grid__element-1 {/*border:1px solid red;*/ width: 100%;display: flex; position: relative}
.grid__element-2 {/*border:1px solid red;*/ width: 100%;display: flex; position: relative}
.grid__element-3 {/*border:1px solid red;*/ width: 100%;display: flex; position: relative}
.grid__element-4 {/*border:1px solid red;*/ width: 100%;display: flex; position: relative}
/* 
#box_top_left{fill:#0B68FE}
#box_top_right{fill:#1E807A}
#box_bottom_left{fill:#158458}
#box_bottom_right{fill:#30842A}

#box_top_left:hover{
    fill: #3c86fe;
}
#box_top_right:hover{
    fill:#4b9995;
}
#box_bottom_left:hover{
    fill:#449d79;
}
#box_bottom_right:hover{
    fill:#599d55;
} */

#box_top_left {
    width: 80%;
    height: 100%;
    margin: 0 0 0 auto;
    background: #0B68FE;
    border-radius: 100% 0 0 0;
    -webkit-border-radius: 100% 0 0 0;
    -moz-border-radius: 100% 0 0 0;
}
#grid-1-svg-container h3:hover ~ #box_top_left, #box_top_left:hover{
    background: #3c86fe;
}

#box_top_right {
    width: 80%;
    height: 100%;
    margin: 0 auto 0 0;
    background: #1E807A;
    border-radius: 0 100% 0 0;
    -webkit-border-radius: 0 100% 0 0;
    -moz-border-radius: 0 100% 0 0;
}
#grid-2-svg-container h3:hover ~ #box_top_right, #box_top_right:hover{
    background: #4b9995;
}

#box_bottom_left {
    width: 80%;
    height: 100%;
    margin: 0 0 0 auto;
    background: #158458;
    border-radius: 0 0 0 100%;
    -webkit-border-radius: 0 0 0 100%;
    -moz-border-radius: 0 0 0 100%;
}
#grid-3-svg-container h3:hover ~ #box_bottom_left, #box_bottom_left:hover{
    background: #449d79;
}

#box_bottom_right {
    width: 80%;
    height: 100%;
    margin: 0 auto 0 0;
    background: #30842A;
    border-radius: 0 0 100% 0;
    -webkit-border-radius: 0 0 100% 0;
    -moz-border-radius: 0 0 100% 0;
}
#grid-4-svg-container h3:hover ~ #box_bottom_right, #box_bottom_right:hover{
    background: #599d55;
}

.grid__element__box {display:flex; position: relative; z-index: 2; height: 100%; width: inherit;}

.element__box--left {margin-left: auto}
.element__box--top {margin-top: auto}

.grid__element__box h3 {position: absolute;  font-size: 3.5vmin; color: white; font-weight: 500; text-align: center}

.h3--top-left{top:50%;right:10%}
.h3--top-right{top:50%;left:10%}
.h3--bottom-left{bottom:50%;right:10%}
.h3--bottom-right{bottom:50%;left:10%}

.grid__element__upper-box {
    position: absolute; 
    width: 100%; 
    height: 45%;
    border-radius: 2vmin;
}
.grid__element__under-box {
    position: absolute; 
    bottom:0; 
    width: 100%; 
    border-radius: 2vmin;
    height: 45%;
    align-items: end;
}

.upper-box--top-left{border: 0.3vmin solid #0B68FE}
.upper-box--top-right{border: 0.3vmin solid #1E807A}
.under-box--bottom-left{border: 0.3vmin solid #158458}
.under-box--bottom-right{border: 0.3vmin solid #30842A}

.grid__element__upper-box i {font-size: 1.2vmin;  margin: 1vmin 1vmin 0 0;}
.grid__element__upper-box p {font-size: 3vmin; font-weight: 500; text-align:center}

.grid__element__under-box i {font-size: 1.2vmin; margin: 1vmin 1vmin 0 0;}
.grid__element__under-box p {font-size: 3vmin; font-weight: 500;text-align:center}


.blu {color: #0B68FE}
.blu-acqua{ color:#1E807A}
.verde-acqua {color:#158458}
.verde {color:#30842A}
.grid__element__under-box div {
    display: flex; 
    justify-content: center; 
    height: fit-content;
}
.content-1 {display: flex; justify-content: flex-start; padding: 2vmin 0 0 2vmin}
.content-2 {display: flex; justify-content: flex-end; padding: 2vmin 2vmin 0 0}
.content-1-under {display: flex; justify-content: flex-start; padding: 0 0 2vmin 2vmin}
.content-2-under {display: flex; justify-content: flex-end; padding: 0 2vmin 2vmin 0}

.content-1 p{text-align: left;}
.content-2 p{text-align: right;}
.content-1-under p{text-align: left;}
.content-2-under p{text-align: right;}



/* contenuto centrale  */

.central-content {
    /* border: 1px solid red; */
    position: absolute;
    top: 40vmin; 
    left:0; 
    width: 100%; 
    height: 20vmin;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.central-content svg {padding: 1vmin 0}
.central-content p {color: #7C7B7B; font-size: 2vmin; font-weight: 500}
.central-content div {    
    width: 100%;
    height: 0.2vmin;
    background-color: #7C7B7B;
    margin: 1vmin 0;
}

/* Info-1 */

.info-box {
    
    display: flex; 
    justify-content: center;
    align-items: center;
    border: 0.3vmin solid #0099CC;
    border-radius: 50%;
    background-color: white;
    width: 2.5vmin;
    height: 2.5vmin;
    padding: 0;
}

.info-box p {font-size: 1.8vmin; font-weight: 500; color:#0099CC}

.info-box--1{position: absolute; top:35.5vmin;left:59vmin; z-index:4}

.info-box--2{position: absolute; top: 61.5vmin;left:59vmin; z-index:4}

.info-box--3{position: absolute; top: 47.8vmin; left: 32.8vmin; z-index:4}

/* line path  */

.container-path {
    /* border: 1px solid red; */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 8%;
}
.path--1{position: absolute; top:36vmin; left: 46%}
.path--2{position: absolute; top:62vmin; left: 46%}

.container-path i{color:#0099CC;font-size:2vmin;  /*12px 0 4px*/}
/* .fa-arrow-right{margin-left: 12px} */
.container-path div {
    width: 100%;
    height: 0.3vmin;
    background: repeating-linear-gradient( 90deg, #fff 0, #fff 0.7vmin, #0099CC 0.7vmin, #0099CC 1.4vmin);
    margin: 0;
    /* width: 54px;
    height:3px; */
    /* background-color:#0099CC; */
     
}

/* path big  */

.container-big-path{position:absolute; width: 100%; height: 100%}
.big-path{
    width: 100vmin;
    height: 100vmin;
    margin-left: 10vmin;
    padding-top: 1.5vmin;
}
.big-path path {stroke: #0099CC;stroke-width: 0.3px; stroke-dasharray:1; }



.back-svg{
   
    background-image: url('background_svg.svg');
    background-repeat: no-repeat; 
    background-size: 100%;
    background-position-x: center;
    background-position-y: center;
}

#info-home-container{transition: opacity 0.8s;}
#grid-1{
    transition: opacity 0.8s; 
}
#grid-1 .svg-elem{
    cursor: pointer;
}

#grid-2{
    transition: opacity 0.8s; 
}
#grid-2 .svg-elem{
    cursor: pointer;
}
#grid-3{
    transition: opacity 0.8s; 
}
#grid-3 .svg-elem{
    cursor: pointer;
}
#grid-4{
    transition: opacity 0.8s; 
}
#grid-4 .svg-elem{
    cursor: pointer;
}

#central-content-container{transition: opacity 0.8s;}


/* spicchio blu */

.diagramma-1{opacity: 0; transition: opacity 0.8s; pointer-events: none; cursor: default; display: none;}

.diagramma-1 > .dark-yellow-box{
    position: absolute;
    top: 33vmin;
    left: 48.5%;
    border: 0.4vmin solid #DAA600;
    border-radius: 2vmin;
    padding: 1.5vmin;
    display: flex;
    justify-content: center;
    width: 40vmin;
    cursor: pointer;
    background-color: #DAA600;
}
.diagramma-1 > .dark-yellow-box p{font-size: 1.5vmin; font-weight:500; color: 0}

.diagramma-1 > .yellow-bold-box{
    border: 0.4vmin solid #DAA600; 
    border-radius: 2vmin; 
    padding: 1.9vmin; 
    display: flex; 
    justify-content: center; 
    width: 40vmin; 
    cursor:pointer;
}
.diagramma-1 > .yellow-bold-box p{ font-size: 1.5vmin; font-weight: 800; color:0; text-align: center;}
.diagramma-1 > .gray--1{position: absolute; top:47vmin; left: 48.5%}
.diagramma-1 > .gray--2{position: absolute; top: 50vmin; left:75%}
.diagramma-1 > .yellow--1{position: absolute; top: 57vmin; left: 75%;}
.diagramma-1 > .yellow--2{position: absolute; top: 68vmin; left:75%}

.diagramma-1 > .blu-box{
    border: 0.4vmin solid #002060; 
    border-radius: 2vmin; 
    padding: 1.9vmin; 
    display: flex; 
    justify-content: center; 
    width: 32vmin; 
    cursor:pointer;
}
.diagramma-1 > .blu-box p{font-size: 1.5vmin; font: weight 4px; color:0; text-align: center}

.diagramma-1 > .blu-gray-box{
    border: 0.4vmin solid #AAA7A7; 
    border-radius: 2vmin; 
    padding: 1.9vmin; 
    display: flex; 
    justify-content: center; 
    width: 32vmin; 
    cursor:pointer;
}
.diagramma-1 > .blu-gray-box p{font-size: 1.5vmin; font: weight 4px; color:0; text-align: center}

/* spicchio blu-acqua */

.diagramma-2{opacity: 0; transition: opacity 0.8s; pointer-events: none; cursor: default; display: none;}

.diagramma-2 > .blu-box{
    position: absolute;
    top: 29vmin;
    left:20%;
    border: 0.4vmin solid #002060;
    border-radius: 2vmin; 
    padding: 1.5vmin;
    display: flex;
    justify-content: center;
    width: 32vmin;
    cursor:pointer;
}
.diagramma-2 > .blu-box p{font-size: 1.5vmin; font-weight:500; text-align: center}

.diagramma-2 > .yellow-box{
    position: absolute;
    top: 50vmin;
    left:20%;
    border: 0.4vmin solid #DAA600;
    border-radius: 2vmin;
    padding: 1.9vmin;
    display: flex;
    justify-content: center;
    width: 32vmin;
    cursor:pointer;
}
.diagramma-2 > .yellow-box p {font-size: 1.5vmin; font-weight:400; text-align: center}

.diagramma-2 > .turchese-box {
    position: absolute;
    top: 68vmin;
    left:20%;
    border: 0.4vmin solid #9DC3E6;
    border-radius: 2vmin;
    padding: 1.9vmin;
    display: flex;
    justify-content: center;
    width: 32vmin;
    cursor:pointer;
}
.diagramma-2 > .turchese-box p {font-size: 1.5vmin; font-weight:400; text-align: center}

.ue-container{/*border: 1px solid red;*/ position: absolute; top: 2vmin; left: 100vmin; width: 20vmin}



/* spicchio verde acqua */

.diagramma-3{opacity: 0; transition: opacity 0.8s; pointer-events: none; cursor: default; display: none;}



.diagramma-3 > .blu-box{
    position: absolute;
    top: 60vmin; 
    left:50%;
    border: 0.4vmin solid #002060;
    border-radius: 2vmin;
    padding: 1.5vmin;
    display: flex;
    justify-content: center;
    width: 32vmin;
    cursor:pointer;
}
.diagramma-3 > .blu-box p{font-size: 1.5vmin; font-weight:500; text-align: center}

.diagramma-3 > .blu-fill-box {
    position: absolute;
    top: 23vmin;
    left:22%;
    border: 0.4vmin solid #2F528F;
    background-color: #4472C4;
    padding: 1.5vmin;
    display: flex;
    justify-content: center;
    width: 32vmin;
    cursor:pointer;
}
.diagramma-3 > .blu-fill-box p {font-size: 2vmin; font-weight:400; text-align: center; color: #ffffff}


.diagramma-3 >  .container-attuazione__first-row{
    top: 5vmin; left: 55%;
}
.diagramma-3 >  .container-attuazione__second-row{
    top: 20vmin; left: 55%;
}
.diagramma-3 >  .container-attuazione__first-row,
.diagramma-3 >  .container-attuazione__second-row {
    margin: 10vmin 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
} 
.diagramma-3 > .container-attuazione__first-row p,
.diagramma-3 >  .container-attuazione__second-row p{
    font-size: 2vmin;
    text-align: center;
    color: #218721;
    margin: 0 5% 0 10%;
    font-weight: 500;
}

.diagramma-3 > .container-attuazione__first-row div,
.diagramma-3 > .container-attuazione__second-row div {
    height: 12vmin;
    width: 33vmin;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 1.7vmin;
    color: #2F528F;
}


/* spicchio verde  */

.diagramma-4{opacity: 0; transition: opacity 0.8s; pointer-events: none; cursor: default; display: none;}


.diagramma-4 > .container-attuazione__first-row{
    top:50vmin; 
    left: 0; 
}
.diagramma-4 > .container-attuazione__second-row{
    top:65vmin; 
    left: 0; 
}
.diagramma-4 > .container-attuazione__first-row, 
.diagramma-4 > .container-attuazione__second-row{ 
    display: flex; 
    align-items:center; 
    padding: 4vmin 0;
    position: absolute; 
}

.fill-box{
    background-color: #4472C4;
    padding: 2vmin;
    margin-right: 2vmin;
    display: flex;
    justify-content: center;
    width: 42%;
    cursor: pointer;
    color: #fff;
    text-align: center;
    font-size: 1.8vmin;
    border: 0.4vmin solid #2F528F;
}
.hexagon-box {    
    height: 14vmin;
    width: 32vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8vmin;
    color: #2F528F;
    text-align: center;
}
 

.pointer-cursor{
    cursor: pointer;
}

.tooltip{
    opacity: 0;
    /* display: none; */
    max-width: 60vmin;
    background-color: #007EA8;
    color: #FCFCFC;
    font-size: 1.7vmin;
    padding: 2vmin;
    position: absolute;
    z-index: -1;
    border-radius: 1vmin;
    border: 0.4vmin solid #FCFCFC; 
    transition: opacity 0.6s;
    top: 0;
   
}
 
/* .line{
    width: 0.1vmin;
    height: 0.2vmin;
    background-color: black;
    position: absolute;
}

.line-gray{
    width: 0.1vmin;
    height: 0.2vmin;
    background-color: black;
    position: absolute;
}

.line-blu-h{
    width: 0.3vmin;
    height: 0.3vmin;
    background: repeating-linear-gradient(
                    90deg, #0099CC 0, #0099CC 2vmin, 
                    #fff 2vmin, #fff 4vmin);
    position: absolute;
}

.line-blu-v{
    width: 0.2vmin;
    height: 0.2vmin;
    background: repeating-linear-gradient(
        0deg, #0099CC 0, #0099CC 2vmin, 
        #fff 2vmin, #fff 4vmin);
    position: absolute;
    display: flex;
    justify-content: center;
}

.line-gray-h{
    width: 0.3vmin;
    height: 0.3vmin;
    background: repeating-linear-gradient(
                    90deg, gray 0, gray 2vmin, 
                    #fff 2vmin, #fff 4vmin);
    position: absolute;
}

.line-gray-v{
    width: 0.3vmin;
    height: 0.3vmin;
    background: repeating-linear-gradient(
                    0deg, gray 0, gray 2vmin, 
                    #fff 2vmin, #fff 4vmin);
    position: absolute;
    display: flex;
    justify-content: center;
}

.arrow-left{
    color: #0099CC;
    margin-top: -1.2vmin;
    font-size: 3vmin;
    position: absolute;
    
}
.arrow-down{
    color: #0099CC;
    font-size: 3vmin;
    bottom: -0.3vmin;
    position: absolute;
}
.arrow-right{
    color: gray;
    font-size: 3vmin;
    position: absolute;
    bottom: -1.4vmin;
} */

.back-text{
    opacity: 0;
    font-size: 1.5vmin;
    transition: opacity 0.4s;
}


/* @media screen and (max-width: 2300px) {
    @media all and (max-device-width: 320px){
    .grid__element__box{
        transform: scale(0.8);
    }
} */


/*linee grige */
.container-big-path--interno{position:absolute; width: 100%; height: 100%; z-index: -1; top: 0;}
.line-gray{width: 100vmin;height: 100vmin; stroke:#AAA7A7}
.container-big-path--interno .line-gray path {stroke-width: 0.2%}

.line-celeste{width: 100vmin;height: 100vmin; stroke:#0099CC}
.container-big-path--interno .line-celeste path {stroke-width: 0.2%; stroke-dasharray: 1;}

.line-gray--dash{width: 100vmin; height: 100vmin; stroke:#AAA7A7}
.line-gray--dash path{stroke-width: 0.2%; stroke-dasharray: 1;}

 .fa-caret-left{
    position: absolute;
    top: 5vmin;
    left: 97.5vmin;
    font-size: 4vmin;
    color: #0099CC;
    rotate: 180deg;
}
.fa-caret-down{
    position:absolute;
    top: 30vmin;
    left: 77.2vmin;
    font-size: 4vmin;
    color: #0099CC;
}

.fa-caret-right{
    color: #AAA7A7;
    position: absolute;
    font-size: 3vmin;
}

.right-1{
    top: 18.5vmin;
    left: 70vmin;
}

.right-2{
    top: 33.5vmin;
    left: 70vmin;
}



/* MEDIA QUERY */

/* 125% */
@media only screen and (max-width: 1250px) {
    .path-large-2{
        opacity: 0 !important;
    }
    .path-small-2{
        opacity: 1 !important;
    }
    .path-smallx-2{
        opacity: 0 !important;
    }
    .path-smallxx-2{
        opacity: 0 !important;
    }
    .path-smallxxx-2{
        opacity: 0 !important;
    }
    .grid__element__box h3 { font-size: 3.5vmin}
    .grid__element__upper-box p {font-size: 3vmin}
    .grid__element__under-box p {font-size: 3vmin;}
    .grid__element__upper-box i {font-size: 1.2vmin}
    .grid__element__under-box i {font-size: 1.2vmin}
    .central-content p {font-size: 2.1vmin}
    
    .info-box{width: 2.7vmin; height:2.7vmin}
    .info-box p {font-size: 2vmin}

    .diagramma-1 > .dark-yellow-box p{font-size: 1.6vmin}
    .diagramma-1 > .yellow-bold-box p{ font-size: 1.6vmin}
    .diagramma-1 > .blu-box p{font-size: 1.6vmin}
    .diagramma-1 > .blu-gray-box p{font-size: 1.6vmin}
    
    .diagramma-2 > .blu-box p,.diagramma-2 > .yellow-box p,.diagramma-2 > .turchese-box p{
        font-size:1.6vmin
    }

    .diagramma-3 > .blu-fill-box p,.diagramma-3 > .container-attuazione__first-row p,
    .diagramma-3 >  .container-attuazione__second-row p {
        font-size: 2.1vmin;
    }
    .diagramma-3 > .container-attuazione__first-row div,
.diagramma-3 > .container-attuazione__second-row div{
    font-size: 1.8vmin;
}
.diagramma-3 > .blu-box p{font-size: 1.6vmin}

.fill-box,.hexagon-box{
    font-size: 1.9vmin;
}
.tooltip{
    font-size: 1.8vmin;
}
}



/* 150% */
@media only screen and (max-width: 1100px) {
    .grid__element__box h3 { font-size: 3.5vmin}
    .grid__element__upper-box p {font-size: 3vmin}
    .grid__element__under-box p {font-size: 3vmin;}
    .grid__element__upper-box i {font-size: 1.5vmin}
    .grid__element__under-box i {font-size: 1.5vmin}
    .central-content p {font-size: 2.3vmin}
    
    .info-box{width: 3vmin; height:3vmin}
    .info-box p {font-size: 2.2vmin}
    .diagramma-1 > .dark-yellow-box p{font-size: 1.7vmin}
    .diagramma-1 > .yellow-bold-box p{ font-size: 1.7vmin}
    .diagramma-1 > .blu-box p{font-size: 1.7vmin}
    .diagramma-1 > .blu-gray-box p{font-size: 1.7vmin}

    .diagramma-2 > .blu-box p,.diagramma-2 > .yellow-box p,.diagramma-2 > .turchese-box p{
        font-size:1.7vmin
    }
    .diagramma-3 > .blu-fill-box p,.diagramma-3 > .container-attuazione__first-row p,
    .diagramma-3 >  .container-attuazione__second-row p {
        font-size: 2.2vmin;
    }
    .diagramma-3 > .container-attuazione__first-row div,
    .diagramma-3 > .container-attuazione__second-row div{
        font-size: 1.9vmin;
    }
    .diagramma-3 > .blu-box p{font-size: 1.7vmin}

    .fill-box,.hexagon-box{
        font-size: 2vmin;
    }
    .tooltip{
        font-size: 2vmin;
    }
}

/* 175% */
@media only screen and (max-width: 1050px) {
    .path-large-2{
        opacity: 0 !important;
    }
    .path-small-2{
        opacity: 0 !important;
    }
    .path-smallx-2{
        opacity: 1 !important;
    }
    .path-smallxx-2{
        opacity: 0 !important;
    }
    .path-smallxxx-2{
        opacity: 0 !important;
    }
    .grid__element__box h3 { font-size: 3.5vmin}
    .grid__element__upper-box p {font-size: 3vmin}
    .grid__element__under-box p {font-size: 3vmin;}
    .grid__element__upper-box i {font-size: 1.3vmin}
    .grid__element__under-box i {font-size: 1.3vmin}
    .central-content p {font-size: 2.3vmin}
    
    .info-box{width: 2.8vmin; height:2.8vmin}
    .info-box p {font-size: 1.8vmin}
    .diagramma-1 > .dark-yellow-box p{font-size: 1.8vmin}
    .diagramma-1 > .yellow-bold-box p{ font-size: 1.8vmin}
    .diagramma-1 > .blu-box p{font-size: 1.8vmin}
    .diagramma-1 > .blu-gray-box p{font-size: 1.8vmin}

    .diagramma-2 > .blu-box p,.diagramma-2 > .yellow-box p,.diagramma-2 > .turchese-box p{
        font-size:1.8vmin
    }
    .diagramma-3 > .blu-fill-box p,.diagramma-3 > .container-attuazione__first-row p,
    .diagramma-3 >  .container-attuazione__second-row p {
        font-size: 2.3vmin;
    }
    .diagramma-3 > .container-attuazione__first-row div,
    .diagramma-3 > .container-attuazione__second-row div{
        font-size: 2vmin;
    }
    .diagramma-3 > .blu-box p{font-size: 1.8vmin}
    .fill-box,.hexagon-box{
        font-size: 2.1vmin;
    }
    .tooltip{
        font-size: 2.1vmin;
    }

    .h3--bottom-left{
        right: 4%;
    }
}


@media only screen and (max-width: 900px) {
    .path-large-2{
        opacity: 0 !important;
    }
    .path-small-2{
        opacity: 0 !important;
    }
    .path-smallx-2{
        opacity: 0 !important;
    }
    .path-smallxx-2{
        opacity: 1 !important;
    }
    .path-smallxxx-2{
        opacity: 0 !important;
    }
    .grid__element__box h3 { font-size: 3.5vmin}
    .grid__element__upper-box p {font-size: 3vmin}
    .grid__element__under-box p {font-size: 3vmin;}
    .grid__element__upper-box i {font-size: 1.5vmin}
    .grid__element__under-box i {font-size: 1.5vmin}
    .central-content p {font-size: 2.6vmin}
    
    .info-box{width: 3.1vmin; height:3.1vmin}
    .info-box p {font-size: 2.1vmin}
    .diagramma-1 > .dark-yellow-box p{font-size: 1.9vmin}
    .diagramma-1 > .yellow-bold-box p{ font-size: 1.9vmin}
    .diagramma-1 > .blu-box p{font-size: 1.9vmin}
    .diagramma-1 > .blu-gray-box p{font-size: 1.9vmin}

    .diagramma-2 > .blu-box p,.diagramma-2 > .yellow-box p,.diagramma-2 > .turchese-box p{
        font-size:1.9vmin
    }
    .diagramma-3 > .blu-fill-box p,.diagramma-3 > .container-attuazione__first-row p,
    .diagramma-3 >  .container-attuazione__second-row p {
        font-size: 2.4vmin;
    }
    .diagramma-3 > .container-attuazione__first-row div,
    .diagramma-3 > .container-attuazione__second-row div{
        font-size: 2.1vmin;
    }
    .diagramma-3 > .blu-box p{font-size: 1.9vmin}
    .fill-box,.hexagon-box{
        font-size: 2.1vmin;
    }
    .tooltip{
        font-size: 2.1vmin;
    }
}

/* 200% */

@media only screen and (max-width: 800px) {
    .grid__element__box h3 { font-size: 4vmin}
    .grid__element__upper-box p {font-size: 3vmin}
    .grid__element__under-box p {font-size: 3vmin;}
    .grid__element__upper-box i {font-size: 1.5vmin}
    .grid__element__under-box i {font-size: 1.5vmin}
    .central-content p {font-size: 3vmin}
    
    .info-box{width: 3.5vmin; height:3.5vmin}
    .info-box p {font-size: 2.5vmin}
    .diagramma-1 > .dark-yellow-box p{font-size: 2vmin}
    .diagramma-1 > .yellow-bold-box p{ font-size: 2vmin}
    .diagramma-1 > .blu-box p{font-size: 2vmin}
    .diagramma-1 > .blu-gray-box p{font-size: 2vmin}

    .diagramma-2 > .blu-box p,.diagramma-2 > .yellow-box p,.diagramma-2 > .turchese-box p{
        font-size:2vmin
    }
    .diagramma-3 > .blu-fill-box p,.diagramma-3 > .container-attuazione__first-row p,
    .diagramma-3 >  .container-attuazione__second-row p {
        font-size: 2.5vmin;
    }
    .diagramma-3 > .container-attuazione__first-row div,
    .diagramma-3 > .container-attuazione__second-row div{
        font-size: 2.2vmin;
    }
    .diagramma-3 > .blu-box p{font-size: 2vmin}
    .fill-box,.hexagon-box{
        font-size: 2.1vmin;
    }
    .tooltip{
        font-size: 2.1vmin;
    }
}


@media screen and (max-width: 750px) {
    .path-large-2{
        opacity: 0 !important;
    }
    .path-small-2{
        opacity: 0 !important;
    }
    .path-smallx-2{
        opacity: 0 !important;
    }
    .path-smallxx-2{
        opacity: 0 !important;
    }
    .path-smallxxx-2{
        opacity: 1 !important;
    }
    .container{
        transform: scale(0.81) translate(-12%, -12%);
        -webkit-transform: scale(0.81) translate(-12%, -12%);
    }
    .grid__element__upper-box p {font-size: 3vmin}
    .grid__element__under-box p {font-size: 3vmin;}
    #diag-3 .back-svg{
        font-size: 1.8vmin;
    }
    .fill-box{
        padding: 1.2vmin;
        margin-left: 0.8vmin;
    }
    .ue-container{
        left: 100vmin;
        top: 2.8vmin;
    }
    .fa-caret-left{
        top: 5.8vmin;
        left: 97.5vmin;
    }
    .path-large{
        opacity: 0 !important;
    }
    .path-small{
        opacity: 1 !important;
    }
    .svg-elem:focus{
        outline: none !important;
    }
}
.path-large-2{
    opacity: 1;
}
.path-small-2{
    opacity: 0;
}
.path-smallx-2{
    opacity: 0;
}
.path-smallxx-2{
    opacity: 0;
}
.path-smallxxx-2{
    opacity: 0;
}
.path-large{
    opacity: 1;
}
.path-small{
    opacity: 0;
}

@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */ 
}